<template>
  <view :class="classNames">
    <slot></slot>
  </view>
</template>
<script lang="ts">
import { computed } from "vue";
export default {
  name: "Space",
  props: {
    wrap: {
      type: Boolean,
      default: false,
    },
    direction: {
      type: String,
      default: "horizontal",
    },
    full: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const prefixCls = "arco-space";

    const classNames = computed(() => {
      return [
        prefixCls,
        {
          [`${prefixCls}-${props.direction}`]: !props.wrap,
          [`${prefixCls}-wrap`]: props.wrap,
          [`${prefixCls}-full`]: props.full,
        },
      ];
    });

    return { classNames };
  },
};
</script>
